<template>
    <div class="proxy_index" ref="proxyRef">
        <div class="item">
            <div class="label">
                <div>代理方式</div>
                <div style="color: #3569fd; cursor: pointer;" @click="quoteipDialog = true">引用代理</div>
            </div>
            <div class="value">
                <app-button3 v-model="state.formData.proxy.mode" @click="store.changeProxyMode()" :options="state.map.procyMode" />
            </div>
        </div>
        <div class="item" v-if="state.formData.proxy.mode == 1">
            <div class="label">服务商</div>
            <div class="value">
                <el-select v-model="state.formData.proxy.facilitator" placeholder="选择服务商" style="width: 90%">
                    <el-option v-for="item in state.map.facilitatorList" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
        </div>
        <div class="item">
            <div class="label">代理类型</div>
            <div class="value ">
                <div class="flex" style="width: 90%;">
                    <el-select v-model="state.formData.proxy.type" placeholder="选择代理类型" style="flex: 1;">
                        <el-option v-for="item in state.map.procyType" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                    <el-select
                        v-if="state.formData.proxy.type == 'Lumauto' || state.formData.proxy.type == 'Luminati' || state.formData.proxy.type == 'Iphtml'"
                        v-model="state.formData.proxy.proxyType" placeholder="选择" style="width: 120px;margin-left: 12px;">
                        <el-option v-for="item in state.map.proxyTypeOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>

                <div class="text2" v-if="state.formData.proxy.type == -1">将使用本机IP，更换上网地点或电脑时IP将变化</div>
            </div>
        </div>

        <div class="item" v-if="state.formData.proxy.type != -1 && state.formData.proxy.mode == 0">
            <div class="label">代理主机</div>
            <div class="value">
                <el-input v-model="state.formData.proxy.host" style="width: 90%" placeholder="代理主机" />
                <div class="text2">可按‘主机:端口:账号:密码’或‘主机:端口’格式粘贴</div>
            </div>
        </div>

        <div class="item" v-if="state.formData.proxy.type != -1 && state.formData.proxy.mode == 0">
            <div class="label">代理端口</div>
            <div class="value">
                <el-input v-model="state.formData.proxy.port" style="width: 90%" placeholder="代理端口" />
            </div>
        </div>
        <div class="item" v-if="state.formData.proxy.type != -1 && state.formData.proxy.mode == 0">
            <div class="label">代理账号</div>
            <div class="value">
                <el-input v-model="state.formData.proxy.username" style="width: 90%" placeholder="代理账号" />
            </div>
        </div>
        <div class="item" v-if="state.formData.proxy.type != -1 && state.formData.proxy.mode == 0">
            <div class="label">代理密码</div>
            <div class="value">
                <el-input v-model="state.formData.proxy.password" style="width: 90%" placeholder="代理密码" />
            </div>
        </div>

        <div class="item"
            v-if="(state.formData.proxy.type == 'Oxylabsauto' || state.formData.proxy.type == 'Lumauto' || state.formData.proxy.type == 'smartproxy' || state.formData.proxy.type == 'Iphtml' || state.formData.proxy.type == 'IPIDEA') && state.formData.proxy.mode == 0">
            <div class="label">IP</div>
            <div class="value">
                <el-input v-model="state.formData.proxy.ip" style="width: 90%" placeholder="IP地址" />
            </div>
        </div>

        <div class="item"
            v-if="(state.formData.proxy.type == 'Oxylabsauto' || state.formData.proxy.type == 'Lumauto' || state.formData.proxy.type == 'smartproxy' || state.formData.proxy.type == 'Iphtml' || state.formData.proxy.type == 'IPIDEA') && state.formData.proxy.mode == 0">
            <div class="label">国家/地区</div>
            <div class="value">
                <el-select v-model="state.formData.proxy.country" placeholder="选择国家/地区" style="width: 90%">
                    <el-option v-for="item in state.map.countryOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
        </div>


        <div class="item"
            v-if="(state.formData.proxy.type == 'Oxylabsauto' || state.formData.proxy.type == 'Lumauto' || state.formData.proxy.type == 'smartproxy' || state.formData.proxy.type == 'Iphtml' || state.formData.proxy.type == 'IPIDEA') && state.formData.proxy.mode == 0">
            <div class="label">州/省</div>
            <div class="value">
                <el-input v-model="state.formData.proxy.province" :disabled="state.formData.proxy.country == ''"
                    style="width: 90%" placeholder="请输入州/省（建议英文）" />
            </div>
        </div>
        <div class="item"
            v-if="(state.formData.proxy.type == 'Oxylabsauto' || state.formData.proxy.type == 'Lumauto' || state.formData.proxy.type == 'smartproxy' || state.formData.proxy.type == 'Iphtml' || state.formData.proxy.type == 'IPIDEA') && state.formData.proxy.mode == 0">
            <div class="label">城市</div>
            <div class="value">
                <el-input v-model="state.formData.proxy.city" :disabled="state.formData.proxy.country == ''"
                    style="width: 90%" placeholder="请输入城市（建议英文）" />
            </div>
        </div>

        <div class="item" v-if="state.formData.proxy.mode == 1">
            <div class="label">提取方式</div>
            <div class="value">
                <el-select v-model="state.formData.proxy.extractModel" placeholder="提取方式" style="width: 90%">
                    <el-option v-for="item in state.map.extractModel" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
        </div>

        <div class="item" v-if="state.formData.proxy.mode == 1">
            <div class="label">提取链接</div>
            <div class="value">
                <el-input v-model="state.formData.proxy.extractUrl" style="width: 90%" placeholder="提取链接" />
            </div>
        </div>

        <div class="item" v-if="state.formData.proxy.type != -1">
            <div class="label">代理协议</div>
            <div class="value">
                <el-radio-group v-model="state.formData.proxy.agreement">
                    <el-radio value="-1">速度优先</el-radio>
                    <el-radio value="IPv4">IPv4</el-radio>
                    <el-radio value="IPv6">IPv6</el-radio>
                </el-radio-group>
            </div>
        </div>

        <div class="item" v-if="state.formData.proxy.mode == 0">
            <div class="label">IP查询渠道</div>
            <div class="value">
                <el-select v-model="state.formData.proxy.channel" placeholder="选择查询渠道" style="width: 90%">
                    <el-option v-for="item in state.map.channelOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
        </div>

        <div class="item" v-if="state.formData.proxy.type != -1 && state.formData.proxy.mode == 0">
            <div class="label">IP变更提醒</div>
            <div class="value">
                <el-switch v-model="state.formData.proxy.changeWarn" />
            </div>
        </div>

        <div class="item">
            <div class="value">
                <app-button @click="store.clickcheckIP"
                    v-if="state.formData.proxy.is_check == 0 || state.formData.proxy.is_check == 2">检查网络</app-button>
                <template v-if="state.formData.proxy.is_check == 1">
                    <div class="flex">
                        <app-button class="flex" style="opacity: .8;">
                            <app-loader :loading="loading" style="width: 16px;height: 16px;" />
                            <div style="margin-left: 8px;">检查网络中</div>
                        </app-button>
                        <div style="margin-left: 24px;cursor: pointer;color: #3569fd;font-size: 14px;"
                            @click="store.clickcancelCheckip">取消</div>
                    </div>

                </template>
                <template v-if="state.formData.proxy.is_check == 2">
                    <div class="checkip_text"
                        :style="state.formData.proxy.ip_check_text.status == 0 ? 'color: #F56C6C' : 'color: #67C23A'">
                        <div class="flex">
                            <img v-if="state.formData.proxy.ip_check_text.status == 1"
                                src="@/assets/home/success_icon.png" style="width: 16px;height: 16px;" alt="">
                            <img v-if="state.formData.proxy.ip_check_text.status == 0"
                                src="@/assets/home/error_icon.png" style="width: 17px;height: 17px;" alt="">
                            <div style="margin-left: 8px;">{{ state.formData.proxy.ip_check_text.status == 0 ? '连接测试失败'
                                : '连接测试成功' }}</div>
                        </div>
                        <div class="flex">
                            <div>IP：{{ state.formData.proxy.ip_check_text.ip }}</div>&nbsp;&nbsp;&nbsp;
                            <div>国家/地区：{{ state.formData.proxy.ip_check_text.country }}</div>&nbsp;&nbsp;&nbsp;
                            <div>时区：{{ state.formData.proxy.ip_check_text.timezone }}</div>
                        </div>
                    </div>
                </template>

            </div>
        </div>

        <div class="item" v-if="state.formData.proxy.mode == 1">
            <div class="label" style="color: #F56C6C">注意：大部分代理IP平台，需将本机IP加入其白名单才可提取连接。</div>
        </div>

        <app-dialog-quoteip v-model="quoteipDialog" @change="changeQuoteip" />
    </div>
</template>

<script setup>
const { store, state } = inject('storejs')
const proxyRef = ref(null)
const loading = ref(true)

const quoteipDialog = ref(false)
onMounted(() => {

})

const changeQuoteip = (row) => {
    console.log(row)
    state.formData.proxy = row
}
</script>

<style lang="scss" scoped>
.proxy_index {
    width: 100%;
    padding: 8px 16px 0 16px;
}

.item {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;

    .label {
        height: 30px;
        padding-bottom: 8px;
        color: #4e5969;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
    }

    .value {
        .text {
            margin-top: 8px;
            color: #00000073;
            font-size: 14px;
        }

        .text2 {
            margin-top: 8px;
            color: #00000073;
            font-size: 12px;
        }

    }

}

.between {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
        width: 18px;
        height: 18px;
        margin-right: 8px;
    }
}

.flex {
    display: flex;
    align-items: center;
}

.column {
    display: flex;
    flex-direction: column;
}

.checkip_text {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    font-size: 14px;
}
</style>

<style>
.app-button2-active {
    border: 1px solid #3569fd !important;
    color: #3569fd !important;
}


.user_agent_input .el-input-group__append {
    background-color: #fff;
}
</style>